<template>
	<view class="app column">
		<!-- 顶部栏 -->
		<getheader :headertype="'index'"></getheader>
		<view class="content row">
			<scroll-view class="left-side" scroll-y>
				<view class="item center" :class="{active: item.id === currentid}" v-for="item in cateList" :key="item.id"
					@click="changeCategory(item.id)">
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
			<scroll-view class="right-side" scroll-y>
				<image class="cate-image" :src="cateList[currentid-1].image" mode="aspectFill"
					@click="navToList()"></image>
				<view class="wrap">
					<view class="item column" v-for="item in proList" :key="item.id" @click="navToPro(item.id)">
						<image class="icon" :src="item.imglist[0]" mode="aspectFill"></image>
						<text class="tit">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import getheader from '@/pages/components/getheader.vue';
	export default {
		components: {
			getheader,
		},
		data() {
			return {
				cateList: [],
				proList: [],
				currentid: 2,
			}
		},
		onLoad() {
			let that = this;
			that.cateList = that.globals.cateList;
			that.proList = that.globals.proList;
			console.log('产品数据', that.proList);
		},
		methods: {
			changeCategory(item) {
				this.currentid = item;
				console.log('传入参数', item)
			},
			navToList() {
				let url = '/pages/produce/lists?cateId=' + this.currentid + '&firstCateId=11';
				this.navTo(url);
			},
			navToPro(proId) {
				let url = '/pages/produce/details?proId=' + proId ;
				this.navTo(url);
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.app {
		height: 100%;
	}

	.content {
		flex: 1;
		padding-top: 13vw;
		overflow: hidden;
	}

	.left-side {
		flex-shrink: 0;
		width: 24%;
		height: 100%;
		overflow-y: hidden;
		background-color: $lightgrayback;

		.item {
			height: 12vw;
			font-size: 3vw;
			color: $lightRedcolor;
		}

		.active {
			font-size: 3vw;
			color: $base-color;
			font-weight: 700;
			background-color: $white;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 3vw;
				width: 2%;
				height: 10vw;
				background-color: $base-color;
				border-radius: 0 1vw 1vw 0;
			}
		}
	}

	.right-side {
		flex: 1;
		height: 100%;

		.cate-image {
			width: calc(100% - 6vw);
			height: 30vw;
			margin: 0 0 0 4%;
			border-radius: 2vw;
		}

		.wrap {
			display: flex;
			flex-wrap: wrap;
			padding: 0 3% 0 3%;
		}

		.item {
			flex-shrink: 0;
			justify-content: flex-start;
			align-items: center;
			width: 32%;
			padding: 30rpx 0 0;

			&:nth-child(3n-1) {
				width: 32%;
			}
		}

		.icon {
			width: 80%;
			height: 18vw;
			margin-bottom: 16rpx;
		}

		.tit {
			width: 98%;
			font-size: 2.5vw;
			color: $darkblack;
			text-align: center;
			line-height: 5vw;
			height: 10vw;
			overflow: hidden;
		}
	}
</style>
